<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%--
  Created by IntelliJ IDEA.
  User: 董灌磊
  Date: 2024/4/26
  Time: 14:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.6.8/css/layui.css">
    <script src="/webjars/layui/2.6.8/layui.js"></script>
    <style>
        .weltopfu{
            background-color:#fafafa;
            width: 300px;
        }
        /*.weltop{
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 1px solid black;
        }
        .svp-p{
            margin-top: 23px;
        }
        .weltop-p{
            height: 27px;
        }
        .plotname{
            width: 100px;
            height: 60px;
            border: 1px solid red;
            clear: both;
        }
        .plotname-ul{
            position: absolute;
            top: -19px;

        }
        .plotname-ul-li{
            list-style: none;
            width: 20px;
            height: 26px;
        }*/
    </style>
</head>
<body>
<div class="layui-row">
    <div class="layui-col-md3">
        <div class="layui-row grid-demo weltopfu">
            <div class="layui-col-md3 ">

                <div class="grid-demo grid-demo-bg1 weltop"><p class="svp-p"><svg class="icon" style="width: 4em;height: 4em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4435"><path d="M992.938667 882.346667h-54.613334V264.192c-0.341333-17.749333-10.581333-34.133333-26.965333-41.642667l-271.36-141.312c-15.018667-6.826667-32.426667-6.826667-47.445333 0-17.066667 7.168-27.648 23.210667-26.965334 112.298667v759.466667h-54.613333V117.76c0-91.818667 0-105.472-20.48-112.298667a72.021333 72.021333 0 0 0-54.613333 0L125.610667 168.618667c-16.725333 7.850667-26.965333 24.917333-26.624 43.349333v671.061333H44.373333c-13.312 0-20.48 7.168-20.48 13.994667v78.506667c0 7.168 7.168 14.336 20.48 14.336h948.906667c6.485333 0 19.114667-7.168 20.48-13.994667v-77.824c1.365333-8.533333-13.653333-15.701333-20.821333-15.701333z m-636.928-99.669334c0 7.850667-6.485333 13.994667-13.994667 13.994667H265.216c-7.850667 0-13.994667-6.485333-13.994667-13.994667v-66.56c0-7.850667 6.485333-13.994667 13.994667-13.994666h77.824c7.850667 0 13.994667 6.485333 13.994667 13.994666l-1.024 66.56z m0-199.338666c0 7.850667-6.485333 13.994667-13.994667 13.994666H265.216c-7.850667 0-13.994667-6.485333-13.994667-13.994666v-67.242667c0-7.850667 6.485333-13.994667 13.994667-13.994667h77.824c7.850667 0 13.994667 6.485333 13.994667 13.994667l-1.024 67.242667z m0-199.68c0 3.754667-1.365333 7.509333-4.096 9.898666a13.653333 13.653333 0 0 1-9.898667 4.096H265.216c-3.754667 0-7.509333-1.365333-10.24-4.096a13.653333 13.653333 0 0 1-4.096-9.898666V316.074667c0-3.754667 1.365333-7.509333 4.096-9.898667 2.730667-2.730667 6.144-4.096 10.24-4.096h77.824c3.754667 0 7.509333 1.365333 10.24 4.096a13.653333 13.653333 0 0 1 4.096 9.898667l-1.365333 67.584z m446.464 398.336c0 3.754667-1.365333 7.509333-4.096 9.898666a13.653333 13.653333 0 0 1-9.898667 4.096h-77.824c-3.754667 0-7.509333-1.365333-9.898667-4.096a13.653333 13.653333 0 0 1-4.096-9.898666v-66.56c0-7.850667 6.144-13.994667 13.994667-13.994667h77.824c3.754667 0 7.509333 1.365333 9.898667 4.096a13.653333 13.653333 0 0 1 4.096 9.898667v66.56z m0-199.338667c0 3.754667-1.365333 7.509333-4.096 9.898667a13.653333 13.653333 0 0 1-9.898667 4.096h-77.824c-3.754667 0-7.509333-1.365333-9.898667-4.096a13.653333 13.653333 0 0 1-4.096-9.898667v-66.56c0-7.850667 6.144-13.994667 13.994667-13.994667h77.824c3.754667 0 7.509333 1.365333 9.898667 4.096a13.653333 13.653333 0 0 1 4.096 9.898667v66.56z m0-199.68c0 3.754667-1.365333 7.509333-4.096 9.898667a13.653333 13.653333 0 0 1-9.898667 4.096h-77.824c-3.754667 0-7.509333-1.365333-9.898667-4.096a13.653333 13.653333 0 0 1-4.096-9.898667V316.074667c0-7.850667 6.144-13.994667 13.994667-13.994667h77.824c3.754667 0 7.509333 1.365333 9.898667 4.096a13.653333 13.653333 0 0 1 4.096 9.898667v66.901333z m0 0" p-id="4436"></path></svg></p></div>
                <p>总栋数</p>
            </div>
            <div class="layui-col-md9 ">
                <div class="grid-demo grid-demo-bg2 weltop">
                    <div class="plotname">
                        <ul class="plotname-ul">
                            <c:forEach items="${sessionScope.plot}" var="plot">
                                <li class="plotname-ul-li">${plot.plot.plotname} : ${plot.totalfloor}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-row grid-demo weltopfu">
            <div class="layui-col-md3 ">
                <div class="grid-demo grid-demo-bg1 weltop"><p class="svp-p"><svg class="icon" style="width: 4em;height: 4em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4784"><path d="M868.7 809.6h-88.9v-415c0-15.7-6.2-30.8-17.4-41.9-11.1-11.1-26.2-17.4-41.9-17.4H542.6V157.5c0-15.7-6.2-30.8-17.4-41.9-11.1-11.1-26.2-17.4-41.9-17.4H305.5c-32.7 0-59.3 26.5-59.3 59.3v652.1h-88.9c-32.7 0-59.3 26.5-59.3 59.3 0 32.7 26.5 59.3 59.3 59.3h711.4c32.7 0 59.3-26.5 59.3-59.3 0-32.7-26.5-59.3-59.3-59.3zM438.8 680.9c0 5.6-4.5 10.1-10.1 10.1h-98.3c-5.6 0-10.1-4.5-10.1-10.1v-39c0-5.6 4.5-10.1 10.1-10.1h98.3c5.6 0 10.1 4.5 10.1 10.1v39z m0-177.8c0 5.6-4.5 10.1-10.1 10.1h-98.3c-5.6 0-10.1-4.5-10.1-10.1v-39c0-5.6 4.5-10.1 10.1-10.1h98.3c5.6 0 10.1 4.5 10.1 10.1v39z m0-177.9c0 5.6-4.5 10.1-10.1 10.1h-98.3c-5.6 0-10.1-4.5-10.1-10.1v-39c0-5.6 4.5-10.1 10.1-10.1h98.3c5.6 0 10.1 4.5 10.1 10.1v39z m266.8 385.4c0 5.6-4.5 10.1-10.1 10.1h-98.3c-5.6 0-10.1-4.5-10.1-10.1v-39c0-5.6 4.5-10.1 10.1-10.1h98.3c5.6 0 10.1 4.5 10.1 10.1v39z m0-177.9c0 5.6-4.5 10.1-10.1 10.1h-98.3c-5.6 0-10.1-4.5-10.1-10.1v-39c0-5.6 4.5-10.1 10.1-10.1h98.3c5.6 0 10.1 4.5 10.1 10.1v39z" p-id="4785"></path></svg></p></div>
                <p>总户数</p>
            </div>
            <div class="layui-col-md9 ">
                <div class="grid-demo grid-demo-bg2 weltop">
                    <div class="plotname">
                        <ul class="plotname-ul">
                            <c:forEach items="${sessionScope.plot}" var="plot">
                                <li class="plotname-ul-li">${plot.plot.plotname} : ${plot.totalhouse}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-row grid-demo weltopfu">
            <div class="layui-col-md3 ">
                <div class="grid-demo grid-demo-bg1 weltop"><p class="svp-p"><svg class="icon" style="width: 4em;height: 4em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10532"><path d="M512 68.267L17.067 560.356l68.266 65.422 62.578-62.578v358.4H876.09V563.2l62.578 62.578 68.266-65.422L512 68.266z m0 307.2c73.956 0 133.689 59.733 133.689 133.689S585.956 642.844 512 642.844s-133.689-59.733-133.689-133.688S438.044 375.466 512 375.466zM748.089 813.51H275.91v-22.755c0-65.423 54.045-116.623 116.622-116.623h236.09c65.421 0 116.621 51.2 116.621 116.623v22.755z" p-id="10533"></path></svg></p></div>
                <p>业主数量</p>
            </div>
            <div class="layui-col-md9 ">
                <div class="grid-demo grid-demo-bg2 weltop">
                    <div class="plotname">
                        <ul class="plotname-ul">
                            <c:forEach items="${sessionScope.plot}" var="plot">
                                <li class="plotname-ul-li">${plot.plot.plotname} : ${plot.totalpeople}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-row grid-demo weltopfu">
            <div class="layui-col-md3 ">
                <div class="grid-demo grid-demo-bg1 weltop"><p class="svp-p"><svg class="icon" style="width: 4em;height: 4em;vertical-align: middle;fill: currentColor;overflow: hidden;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10532"><path d="M512 68.267L17.067 560.356l68.266 65.422 62.578-62.578v358.4H876.09V563.2l62.578 62.578 68.266-65.422L512 68.266z m0 307.2c73.956 0 133.689 59.733 133.689 133.689S585.956 642.844 512 642.844s-133.689-59.733-133.689-133.688S438.044 375.466 512 375.466zM748.089 813.51H275.91v-22.755c0-65.423 54.045-116.623 116.622-116.623h236.09c65.421 0 116.621 51.2 116.621 116.623v22.755z" p-id="10533"></path></svg></p></div>
                <p>租户数量</p>
            </div>
            <div class="layui-col-md9 ">
                <div class="grid-demo grid-demo-bg2 weltop">
                    <div class="plotname">
                        <ul class="plotname-ul">
                            <c:forEach items="${sessionScope.plot}" var="plot">
                                <li class="plotname-ul-li">${plot.plot.plotname} : ${plot.totalzupeople}</li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">费用</div>
                <div class="layui-card-body">

                    <div id="bar" style="height: 50%"></div>
                    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>
                    <script>
                        const zongoption = {
                            title:{
                                text:"物业月收入"
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'shadow'
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: [],
                                    type: 'bar'
                                }
                            ]
                        };
                        var chartDom = document.getElementById('bar');
                        var myCharts = echarts.init(chartDom);

                    </script>
                    <script>
                        var $=layui.$;
                        $.ajax({
                            url:"/zongmoneyline",
                            data:{"tu":"bar"},
                            type: "post",
                            success:function (result){
                                var month=new Array();
                                var count=new Array();
                                $(result.data).each(function (i,e){
                                    month.push(e.month)
                                    count.push(e.count)
                                })
                                zongoption.xAxis.data=month;
                                zongoption.series[0].data=count;
                                myCharts.setOption(zongoption);
                            }
                        })
                    </script>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">最近报修</div>
                <div class="layui-card-body">
                    <div id="line" style="height: 50%"></div>

                    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.0/files/dist/echarts.min.js"></script>

                    <script>
                        const option = {
                            title: {
                                text: '停车费月总统计'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            xAxis: {
                                type: 'category',
                                data: []
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    data: [],
                                    type: 'line'
                                }
                            ]
                        };
                        var chartDom = document.getElementById('line');
                        var myChart = echarts.init(chartDom);

                    </script>
                    <script>
                        var $=layui.$;
                        $.ajax({
                            url:"/line",
                            data:{"tu":"line"},
                            type: "post",
                            success:function (result){
                                console.log(result)
                                var month=new Array();
                                var count=new Array();
                                $(result.data).each(function (i,e){
                                    month.push(e.month)
                                    count.push(e.count)
                                })
                                option.xAxis.data=month;
                                option.series[0].data=count;
                                myChart.setOption(option);
                            }
                        })
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">最近通知</div>
                <div class="layui-card-body">
                    <table id="notice" lay-filter="notice"  class="layui-table layui-table-hover"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">最近报修</div>
                <div class="layui-card-body">
                    <table id="repairs" lay-filter="repairs"  class="layui-table layui-table-hover"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var $=layui.$;
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#repairs",
            url:"/selecttoptenrepairs",
            cols:[[
                {title:"位置",templet(r) {
                        return r.plot.plotname+r.position;
                    }},
                {width:'100', align: 'right',title:"状态",templet(r) {
                        return r.repairstate.statename;
                    }},
            ]]
        })
    })
    layui.use(function (){
        let table=layui.table;
        table.render({
            id:"one",
            elem:"#notice",
            url:"/selecttoptennotice",
            cols:[[
                {field:'noticetitle',title:"标题"},
                {width:'180', align: 'right',field:'createtime',align: 'center',title: "时间"},
            ]]
        })
    })
</script>
</body>
</html>
